<!--订单列表-->
<template>
  <div id="moreOrder">
    <!--后退-->
    <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
    <div  v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0"
                 infinite-scroll-immediate-check="false" class="orderListBody">
      <div v-for="item in showData">
      <!--达人 服务-->
        <section class="sectionBod" v-if="item.orderType==1">
            <div class="taskServer">
                <img :src="item.userModel.headPortrait" alt="">
                <div style="width:85%;">
                    <section class="olissueP">
                      <p>{{turnTime(item.orderTime)}} 发布{{item.id}}</p>
                    </section>
                    <section class="olReplaceP">
                      <p>{{item.serverName}}</p>
                      <p class="olPriceP">{{item.amount}}￥</p>
                    </section>
                </div>
            </div>
            <div class="orderListEB">
                <div v-if="item.status==1||item.status==2||item.status==3"><img src="../../../assets/me/olAccess.png" alt="" @click="confirmServer(item.id)">评价</div>
                <div v-if="item.status==4">已完结</div>
            </div>
        </section>
        <!--任务 替身、兼职、二手买卖-->
        <section class="sectionBod" v-if="item.orderType==2&&(item.taskModel.taskType==1||item.taskModel.taskType==2||item.taskModel.taskType==4||item.taskModel.taskType==5||item.taskModel.taskType==6||item.taskModel.taskType==7)">
            <div class="taskServer">
                <img :src="item.taskModel.headPortrait" alt="">
                <div style="width:85%;">
                    <section class="olissueP">
                        <p style="">{{turnTime(item.taskModel.initiatorTime)}} 发布{{item.id}}</p>
                        <p v-if="item.taskModel.manSum==1">
                            <img src="../../../assets/me/male.png" alt="">仅限男生
                        </p>
                        <p v-if="item.taskModel.womanSum==1">
                            <img src="../../../assets/me/women.png" alt="">仅限女生
                        </p>
                        <p v-if="item.taskModel.allSum==1">
                            <img src="../../../assets/me/gender.png" alt="">不限性别
                        </p>
                    </section>
                    <section class="olReplaceP">
                          <p style="width:85%;"><span v-if="item.taskModel.taskType==4">{{item.common1}}</span><span >{{item.taskModel.taskExplain}}</span></p>
                          <p class="olPriceP">{{item.taskModel.amount}}￥</p>
                    </section>
                    <div v-if="item.taskModel.taskType==6" class="olReplaceTx">
                        <img :src="item.taskModel.common1" alt="">
                        <img :src="item.taskModel.common2" alt="">
                    </div>
                    <div class="olReplaceLa"></div>
                </div>
            </div>
            <div class="orderListEB">
                <div v-if="item.taskModel.taskType==4"><img src="../../../assets/me/olAccess.png" alt="" @click="confirmCommit(item.taskModel.taskType,item.id)">评价</div>
                   <div v-else>
                        <div v-if="item.bigType==2&&item.status==3">您已评价了呢</div>
                        <div v-if="item.bigType==2&&item.status==2"><img src="../../../assets/me/olAccess.png" alt="" @click="confirmCommit(item.taskModel.taskType,item.id)">评价</div>
                        <div v-if="item.bigType==1&&item.status==3"><img src="../../../assets/me/olAccess.png" alt="" @click="confirmCommit(item.taskModel.taskType,item.id)">评价</div>
                        <div v-if="item.status==1">此订单未被接单</div>
                        <div v-if="item.status==4">此订单已完结</div>
                   </div>
                  <div><img src="../../../assets/me/olFinish.png" alt=""><span v-if="item.taskModel.taskType==4">已接单</span><span v-else>{{orderStatus(item.status)}}</span></div>
            </div>
        </section>
        <!--任务 快递-->
        <section class="sectionBod" v-if="item.orderType==2&&(item.taskModel.taskType==3)">
            <div class="taskServer">
                <img :src="item.taskModel.headPortrait" alt="">
                <div style="width:85%;">
                    <section class="olissueP">
                        <p >{{turnTime(item.taskModel.initiatorTime)}} 发布{{item.id}}</p>
                        <p v-if="item.taskModel.manSum==1"><img src="../../../assets/me/male.png" alt="">仅限男生</p>
                        <p v-if="item.taskModel.womanSum==1"><img src="../../../assets/me/women.png" alt="">仅限女生</p>
                        <p v-if="item.taskModel.allSum==1"><img src="../../../assets/me/gender.png" alt="">不限性别</p>
                    </section>
                    <section class="olReplaceP">
                        <p style="width:85%;"><span v-if="item.taskExplain.length>=66"></span>{{lengthSub(item.taskModel.taskExplain,'homeDetail')}}</p>
                        <p class="olPriceP">{{item.taskModel.amount}}￥</p>
                    </section>
                    <div class="olReplaceTx">
                        <p style="width:1.7rem">{{item.common1}}</p>
                          <img style="width:6rem;height:0.8rem;" src="../../../assets/homepage/line.png" alt="">
                        <p style="position:relative;right:3.8rem;">{{item.common2}}</p>
                        <p style="position:relative;right:1.5rem;">{{item.taskLocation,'moreOrderAddress'}}</p>
                    </div>

                </div>
            </div>
            <div class="orderListEB">
                <div v-if="item.bigType==2&&item.status==3"><img src="../../../assets/me/olAccess.png" alt="">您已评价评价</div>
                <div v-if="item.bigType==2&&item.status==2"><img src="../../../assets/me/olAccess.png" alt="" @click="confirmCommit(item.taskModel.taskType,item.id)">评价</div>
                <div v-if="item.bigType==2&&item.status==3"><img src="../../../assets/me/olAccess.png" alt="" @click="confirmCommit(item.taskModel.taskType,item.id)">评价</div>
                <div v-if="item.status==1">此订单未被接单</div>
                <div v-if="item.status==4">此订单已完结</div>
                <div><img src="../../../assets/me/olFinish.png" alt=""><span>{{orderStatus(item.status)}}</span></div>
            </div>
        </section>
      </div>

      <!--底部判断是加载图标还是提示“全部加载”-->
      <div class="more_loading">
        <mt-spinner type="fading-circle" color="#2AA094" :size="20" v-show="queryLoading"></mt-spinner>
        <span v-show="moreLoading">已全部加载</span>
      </div>
    </div>
  </div>
</template>
<script>
  import turnTime from '../../../server/dataTime.js'
  import orderStatus from '../../../server/orderStatus.js'
  import lengthSub from '../../../server/lengthSub.js'
  export default {
    data() {
      return {
        lengthSub:lengthSub,
        orderStatus: orderStatus,
        topStatus: '',
        //初始化无限加载相关参数
        queryLoading: false,
        moreLoading: false,
        allLoaded: false,
        turnTime: turnTime,
        showData: [],
        active: 0,
        forms: {
          pageSize: 7,
          pageNumber: 1,
        },
      }
    },
    created() {
      this.getAllOrder()
    },
    methods: {
      confirmServer(id){
        this.$router.push({path: '/serverConfirm/' + id})
      },
      //  确认订单并评论
      confirmCommit(type, id) {
        console.log(type,id)
        if (type == 3) {
          this.$router.push({path: '/expressConfim/' + id})
        }
        if (type == 1 || type == 2|| type == 4) {
          this.$router.push({path: '/doubleConfim/' + id})
        }
        if (type == 6 || type == 7) {
          this.$router.push({path: '/secondHandsellConfim/' + id})
        }
        if (type == 5) {
          this.$router.push({path: '/partTimeConfim/' + id})
        }
      },
      loadTop() {
        this.showData = [];
        this.forms.pageNumber = 1;
        this.getAllOrder();
      },
      handleTopChange(status) {
        this.topStatus = status;

      },
      //无限加载函数
      loadMore() {

        this.forms.pageNumber = Number(this.forms.pageNumber) + 1
        this.getAllOrder()
      },
      // 获取全部订单
      getAllOrder() {
        this.queryLoading = true
        this.$api.getAllOrder(this.forms).then((res) => {
          if (res.code == '000000') {
            this.queryLoading = false
            if (res.data.totalPage === this.forms.pageNumber){
              this.moreLoading = true
            }
            res.data.list.forEach((item) => {
              if (item.taskLocation&&item.taskLocation.length > 6) {
                item.taskLocation = item.taskLocation.substring(0, 6) + '...'
              }

              this.showData.push(item)
            })
            console.log('this.showData')
              console.log(this.showData)
          }
        })
      }
    }
  }
</script>
<style>
.more_loading {
    padding-left: 43%;
}

#moreOrder {
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-image: url(../../../assets/me/bgA.png);
}

#moreOrder .back {
    height: 1.1rem;
    width: 0.6rem;
    margin: 1rem 1rem 0rem 1rem;
}

#moreOrder .orderListBody {
    position: absolute;
    top: 2.75rem;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    margin: auto;
}

#moreOrder .sectionBod {
    padding:0.5rem 0.75rem ;
    width: 93.3%;
    margin:1rem auto;
    background:#fff;
    box-shadow:1px 1px 10px 1px #e2e2e2;
}
#moreOrder .sectionBod .taskServer{
    display:flex;
    border-bottom:2px solid #f8f8f8;
    position:relative;
    justify-content: space-between;
}
#moreOrder .sectionBod .taskServer > img{
    width:3.5rem;
    height:3.5rem;
    border-radius:50%;
    margin-top:0.5rem;
}
#moreOrder .olPriceP {
    color: #299f94;
    font-size: 1.25rem;
}

#moreOrder .olReplaceP{
    margin-left: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #a6a6a6;
    position: relative;
}
#moreOrder .olissueP{
    font-size: 0.8rem;
    color: #a6a6a6;
    height: 1.25rem;
    line-height: 1.25rem;
    display: flex;
    padding-left: 0.25rem;
    margin-left: 0.5rem;
    color: #898989;
    justify-content: space-between;
    border-bottom: 2px solid #f8f8f8;
}
#moreOrder .olissueP p > img{
    height:0.8rem;
    width:0.8rem;
    margin-right:0.25rem;
}
#moreOrder .olReplaceTx{
    margin-left:0.75rem;
    width:15rem;
    font-size:0.8rem;
    display:flex;
    color:#888888;
    padding:0.5rem 0px;
    justify-content:space-between;
}
#moreOrder .olReplaceTx > img{
    height:4rem;
    width:4rem;
}
#moreOrder .olReplaceLa{
    margin-left:0.75rem;
    width:10rem;
    height:1.25rem;
    line-height:1.25rem;
    font-size:0.6rem;
    display:flex;
    color:#888888
}
#moreOrder .orderListEB {
    font-size: 0.6rem;
    color: #8a8a8a;
    display: flex;
    align-item: center;
    margin: 0.25rem;
    justify-content: space-around;
}

#moreOrder .orderListEB img {
    height: 0.75rem;
    width: 0.75rem;
    margin-right: 0.25rem;
}
</style>
